<template>
    <div>
        <header>
            <h1 class="tc fn pr">
                <router-link class="pa cfff" to="/using/discounts" tag="span" style="left:20rem;top: 5rem;">
                    <i class="el-icon-arrow-left f40 "></i>
                </router-link>
                洗车
            </h1>
        </header>
        <main>
            <div>
                <h1 class="fn f30 tc mb20">{{ dataArr.headline }}</h1>
                <p class="f20 car-name">{{ dataArr.touristGroups }}<span class="fr">{{ dataArr.releaseTime | getDate
                }}</span></p>
                <img :src="dataArr.image" alt="">
                <p class="content">{{ dataArr.content }}</p>
            </div>
            <div>
                <p class="price">价格：￥{{ dataArr.price }} <del>原价：￥{{ dataArr.originalCost }}</del></p>
                <p>活动起止日期：<span>{{ dataArr.releaseTime | getDate }}至{{ dataArr.expirationDate | getDate }}</span></p>
                <p>咨询电话：<span>{{ dataArr.tel }}</span></p>
                <p>注意事项：<span>暂无</span></p>
            </div>
        </main>
    </div>
</template>

<script>
import { groupDetails } from '../../../api/using';

export default {
    data() {
        return {
            dataArr: []
        }
    },
    mounted() {
        this.init(this.$route.query);
    },
    filters: {
        getDate(val) {
          if(val){
            let time= val.substr(0,10);
            let d = new Date(val);
            let res = time+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            return res;
          }
        }
    },
    methods: {
        init(query) {
            groupDetails(query)
                .then(r => {
                    this.dataArr = r.data;
                })
                .catch(e => {
                })
        }
    }
}
</script>

<style scoped>
* {
    box-sizing: border-box;
}

header {
    background-color: #3284fc;
    height: 434rem;
    padding-top: 60rem;
}

header>h1 {
    font-size: 32rem;
    color: #fff;
    margin-bottom: 36rem;
}

main>div {
    position: relative;
    top: -290rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20rem;
    background-color: #fff;
}

main>div>img {
    width: 100%;
    height: 407rem;
    border-radius: 20rem;
}

main>div:first-child {
    width: 710rem;
    margin-bottom: 20rem;
    padding: 30rem;
}

main>div:first-child .car-name {
    color: #808080;
    margin-bottom: 16rem;
}

main>div:first-child .content {
    width: 100%;
    line-height: 52rem;
    padding: 0 10rem;
}

main>div:last-child {
    width: 710rem;
    padding: 20rem 38rem 30rem 38rem;
}

main>div:last-child p {
    font-size: 20rem;
    line-height: 50rem;
}

main>div:last-child .price {
    color: #ff4000;
    font-size: 26rem;
}

main>div:last-child .price del {
    font-size: 18rem;
    color: #808080;
}
</style>